<template>
	<view class="content">
		<headerTop></headerTop>
		<!-- <view class="" :style="'height:'+statusBarHeight+'px'"></view> -->
		<view class="image1">
			<u-swiper style="height: 240rpx;border-radius: 20rpx;" :list="imageList" keyName="src"
				@change="e => current = e.current" :autoplay="true">
				<view slot="indicator" class="indicator">
					<view class="indicator__dot" v-for="(item, index) in imageList" :key="index"
						:class="[index === current && 'indicator__dot--active']">
					</view>
				</view>
			</u-swiper>
		</view>
		<!-- 通知 -->
		<view class="inform">
			<view class="inform-info">
				<view class="picture" @click="jump(`/pageA/noticeList/noticeList?type=0&name=公告`)">
					<view class="picture_left">
						<u-icon name="volume" color='#fff'></u-icon>
						<!-- <image src="../../static/news.png" mode=""></image> -->
						<!-- <view class="line"></view> -->
					</view>
				</view>
				<view class="info">
					<swiper class="swiper" :circular="true" :vertical="true" :indicator-dots="false" :autoplay="true"
						:interval="3000" :duration="1000">
						<swiper-item v-for="(item,index) in newsList" :key="index">
							<view class="swiper-item" @click="jump(`/pageB/noticeList/noticeList?type=0&name=公告`)">
								<text class="one-omit">{{item.title}}</text>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<view class="classList">
			<view class="classItem" @click="item.name=='签到'?handleCsignInfo():jump(item.url)"
				v-for="(item,index) in category" :key="index">
				<image :src="$fun.imgUrl(item.image)" mode=""></image>
				<view class="text">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="business">业务类型</view>
		<scroll-view scroll-y="true" :style="'height:'  +scrollheight+'px;'">
			<view class="main">
				<view class="item-robot flex" v-for="(item,index) in list" :key="item.id">
					<view class="lt">
						<image :src="$fun.imgUrl(item.image)" mode=""></image>
					</view>
					<view class="rt">
						<view class="title">{{item.name}}</view>
						<view class="">{{$t('vnode.name22')}}：{{item.balance}}{{$t('vnode.name23')}}</view>
						<view class="flex">
							促销月化:{{item.release}}%<text class="through">月化:{{item.old_release}}%</text>
						</view>
						<view class="flex-between">
							<text class="price">{{item.money}}</text>
							<view class="">
								<u-button type="primary" :text="$t('vnode.name14')" shape="circle"
									style="width: 160rpx;" color="#00A3FF" size="small"
									@click="handlePay(item)"></u-button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<u-popup :show="show" :round="10" @close="close" closeable>
			<view class="popup-box">
				<view class="title">
					{{$t('vnode.name15')}}
				</view>
				<view class="input flex">
					<view class="">
						{{$t('vnode.name16')}}:
					</view>
					<input type="text" :disabled="disabled" v-model="money" :placeholder="$t('vnode.name17')" />
				</view>
				<!-- <view class="text">
					{{$t('vnode.name18')}}：{{model.min_money}}~{{model.mx_money}}
				</view> -->
				<view class="btn">
					<u-button type="primary" :text="$t('vnode.name19')" shape="circle" @click="handleNext"></u-button>
				</view>
			</view>
		</u-popup>
		<CsignIn v-if="isCsignIn" @close="closeCsign" :list="signlist" day="1"></CsignIn>
		<appUpdate v-if="appUpdateShow" :update_info="update_info" @closeModel="closeModel"></appUpdate>
		<view class="" style="height: 50rpx;">

		</view>
		<TabBar :tabBarShow="0"></TabBar>
	</view>
</template>

<script>
	import appUpdate from "@/components/yzhua006-update/app-update.vue";
	import CsignIn from '@/components/c-signIn.vue'
	import robot from '@/pageC/robot/robot.vue'
	import headerTop from "@/components/dacizi-headtag/dacizi-headtag.vue"
	import {
		checkUpdate
	} from "@/components/yzhua006-update/js/app-update-check.js";
	export default {
		components: {
			appUpdate,
			CsignIn,
			robot,
			headerTop
		},
		data() {
			return {
				title: 'Hello',
				imageList: [],
				newsList: [{
					title: ''
				}],
				product: '',
				current: 0,
				category: [],
				appUpdateShow: false,
				shoplist: [],
				product: [],
				isCsignIn: false,
				list: [],
				signlist: [],
				show: false,
				model: {},
				money: '',
				scrollheight: 0,
				statusBarHeight: 0,
				disabled:true
			}
		},
		onShow() {
			this.$fun.ajax.post('index/index', {}).then(res => {
				// console.log(res)
				let imgList = res.data.advert
				for (var i = 0; i < imgList.length; i++) {
					imgList[i].src = this.$fun.imgUrl(imgList[i].image)
				}
				this.imageList = imgList
				this.newsList = res.data.news
				this.category = res.data.category
			})
			// this.$fun.ajax.post('index/hot', {}).then(res => {
			// 	this.product = res.data
			// })
			// this.getShopList()
		},
		onLoad() {
			const phoneInfo = uni.getSystemInfoSync(); // 获取手机系统信息
			this.statusBarHeight = phoneInfo.statusBarHeight
			this.scrollheight = uni.getWindowInfo().windowHeight - 200 - 50 - 130 - 80 - this.statusBarHeight
			this.getProductList()
			// #ifdef APP-PLUS
			this.getAppInfo(0); //获取线上APP版本信息  参数type 0自动检查  1手动检查（手动检查时，之前取消更新的版本也会提示出来）
			// #endif
		},
		methods: {
			async signInfo() {
				const res = await this.$fun.ajax.post('user/signInfo')
				this.signlist = res.data.list
			},
			// 获取签到信息
			handleCsignInfo() {
				this.signInfo()
				this.isCsignIn = true
			},
			// 关闭签到弹窗
			closeCsign(val) {
				this.isCsignIn = val
			},
			getShopList(id) {
				this.$fun.ajax.post('index/type_goods', {
					type: '89'
				}).then(res => {
					// console.log(res)
					for (var i = 0; i < res.data.length; i++) {
						if (res.data[i].label) {
							res.data[i].label = res.data[i].label.split(',')
						} else {
							res.data[i].label = []
						}
					}
					this.shoplist = res.data
				})
			},
			jump(url) {
				this.$fun.jump(url)
			},
			closeModel() {
				this.appUpdateShow = false
			},
			getAppInfo(type) {
				const that = this
				const system_info = uni.getSystemInfoSync();
				let params = {
					os: system_info.platform //本机设备操作系统  （android || ios） 
				}
				if (params.os != 'ios' && params.os != 'android') false; //如果不是安卓或ios 返回false

				//这里自行请求API获取版本信息 建议传入操作系统标识，返回本机对应的操作系统最新版本信息，也就是安卓的返回就是安卓的版本信息  ios返回就是ios的版本信息

				//请求获取最新版本
				plus.runtime.getProperty(plus.runtime.appid, (result) => {
					that.$fun.ajax.post('config/version', {
						version: result.version
					}).then(res => {
						that.update_info = {
							version: res.data.version, //线上版本
							now_url: res.data.pkgUrl, //更新链接
							silent: res.data.silent, //是否是静默更新
							force: res.data.force, //是否是强制更新
							net_check: res.data.net_check, //非WIfi是否提示
							note: res.data.content, //更新内容
						}
						checkUpdate(that.update_info, type, that).then(res => {
							if (res.data) {
								that.appUpdateShow = true
							} else {
								// this.$fun.msg(res.msg)
							}
						}); ///检查更新  
						//checkUpdate 这个方法会做什么？：线上版本号 与 本地版本号做对比 ，如果需要更新  根据静默，强制、wifi等信息执行静默更新或跳转到升级页面
						//跳转升级页面的前提是，需要新建并在pages.json中配置升级页面，配置方法请查看插件详情
					})
				})

			},
			// 获取机器人列表
			async getProductList() {
				const res = await this.$fun.ajax.post('product/productList')
				res.data.map((item) => {
					item.release = (item.release * 100).toFixed(2)
					item.old_release = (item.old_release * 100).toFixed(2)
					item.disabled=item.money>=100000?false:true
				})
				this.list = res.data
			},
			close() {
				this.show = false
				this.model = {}
				this.money = ''
			},
			handleNext() {
				if (!this.money) return this.$fun.msg(this.$t('vnode.name20'))
				if (this.money<100000&&this.disabled==false) return this.$fun.msg('价格需大于100000')
				// if (!(+this.money >= +this.model.min_money && +this.money <= +this.model.mx_money)) {
				// 	return this.$fun.msg(this.$t('vnode.name21'))
				// }
				this.$fun.jump(
					`/pageC/robotPay/robotPay?id=${this.model.id}&url=${this.model.image}&money=${this.money}&name=${this.model.name}`
				)
				this.close()
			},
			async handlePay(val) {
				this.show = true
				this.model = val
				this.money = val.money
				this.disabled=val.disabled
				// this.$fun.jump(`/pageC/robotPay/robotPay?id=${val.id}&url=${val.image}&money=${val.money}&name=${val.name}`)
				// const res = await this.$fun.ajax.post('product/productList')
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $uni-bg-color;
		background: url(/static/index/imgbgc.png) no-repeat;
		background-size: 100% 100%;
		// height: 100%;
	}

	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				width: 40rpx;
				height: 12rpx;
				background-color: #ffffff;
			}
		}
	}

	.classList {
		display: flex;
		flex-wrap: wrap;
		width: 690rpx;
		// height: 294rpx;
		// background: #FFFFFF;
		border-radius: 24rpx;
		margin: 30rpx auto;
		padding: 30rpx 0rpx 10rpx;

		.classItem {
			width: 20%;
			display: flex;
			margin-bottom: 20rpx;
			flex-direction: column;
			align-items: center;

			image {
				width: 120rpx;
				height: 99rpx;
			}

			.text {
				margin-top: 10rpx;
				font-weight: 500;
				font-size: 20rpx;
				color: #FFFFFF;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}

	.content {


		.inform {
			// margin-top: 30rpx;

			.inform-info {
				display: flex;
				padding: 0 20rpx;
				width: 690rpx;
				height: 64rpx;
				background: rgba(68, 78, 99, 0.7);
				border-radius: 24rpx;
				margin: 0 auto;

				.picture {
					display: flex;
					align-items: center;
					margin-right: 30rpx;

					image {
						width: 34rpx;
						height: 34rpx;
					}

					&_left {
						display: flex;

						image {
							width: 28rpx;
							height: 28rpx;
						}

						.line {
							width: 2rpx;
							height: 20rpx;
							background: #999999;
							border-radius: 2rpx;
							margin-left: 18rpx;
						}
					}
				}

				.info {
					width: 80%;
					height: 100%;

					.swiper {
						width: 100%;
						height: 100%;

						.swiper-item {
							display: flex;
							align-items: center;
							width: 500rpx;
							height: 100%;
							overflow: hidden;
							flex-wrap: nowrap;
							text-overflow: ellipsis;

							text {
								font-size: 24rpx;
								color: #FFFFFF;

							}
						}
					}
				}
			}
		}

		.image1 {
			width: 690rpx;
			height: 240rpx;
			background: rgba(68, 78, 99, 0.7);
			border-radius: 16rpx;
			margin: 20rpx auto;
		}

		.navlist {
			width: 690rpx;
			height: 140rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 20rpx;
			margin: 30rpx auto;

			image {
				width: 140rpx;
				height: 100rpx;
			}
		}

		.business {
			font-weight: 600;
			font-size: 32rpx;
			color: #FFFFFF;
			margin: 0rpx 30rpx 30rpx;
			padding-top: 20rpx;
		}

		.businesslist {

			.listitem {
				width: 690rpx;
				height: 264rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				margin: 0 auto 30rpx;
				padding: 20rpx;
				display: flex;

				image {
					width: 140rpx;
					height: 140rpx;
				}

				.right {
					margin-left: 16rpx;
					width: 494rpx;

					.name {
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
						margin-top: 15rpx;
					}

					.text {
						font-weight: 400;
						font-size: 22rpx;
						color: #999999;
						width: 418rpx;
						margin-top: 10rpx;
						height: 64rpx;
					}

					.btn {
						display: flex;
						justify-content: flex-end;
						margin-top: 35rpx;

						.btn1 {
							width: 180rpx;
							height: 64rpx;
							background: #DBE7FF;
							border-radius: 32rpx;
							font-weight: 500;
							font-size: 24rpx;
							color: #4D88FF;
							line-height: 64rpx;
							text-align: center;
						}

						.btn2 {
							width: 180rpx;
							height: 64rpx;
							background: linear-gradient(270deg, #4DC4FF 0%, #4D4DFF 100%);
							border-radius: 32rpx;
							font-weight: 500;
							font-size: 24rpx;
							color: #FFFFFF;
							line-height: 64rpx;
							text-align: center;
							margin-left: 30rpx;
						}
					}
				}
			}
		}
	}

	.shoplist {
		width: 750rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		flex-direction: row;
		padding: 0 30rpx 30rpx;
		box-sizing: border-box;

		&_goods {
			width: 336rpx;
			height: 426rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 20rpx;
			margin-bottom: 30rpx;

			image {
				width: 296rpx;
				height: 296rpx;
				border-radius: 16rpx;
			}

			.text {
				width: 296rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				margin: 10rpx 0 0rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.num {
				font-weight: 600;
				font-size: 32rpx;
				color: #ED4961;
			}
		}
	}


	.popup-box {
		height: 500rpx;
		padding: 0 30rpx;

		.title {
			text-align: center;
			padding: 20rpx 0;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #232323;

		}

		.input {
			margin-top: 80rpx;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #d9d9d9;
		}

		.text {
			font-size: 24rpx;
			color: #b9b9b9;
		}

		.btn {
			margin-top: 80rpx;
		}
	}

	.main {
		padding: 30rpx;
		padding-top: 0;

		.item-robot {
			height: 190rpx;
			background-color: rgba(68, 78, 99, 0.7);
			border-radius: 20rpx;
			padding: 10rpx 30rpx;
			margin: 20rpx 0;

			.lt {
				width: 170rpx;
				height: 100%;
				margin-right: 20rpx;

			}

			.rt {
				flex: 1;



				& view:nth-child(1) {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 38rpx;
				}

				& view:nth-child(2),
				& view:nth-child(3) {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #b8b8b8;

					.through {
						font-weight: 400;
						font-size: 24rpx;
						color: #b8b8b8;
						text-decoration: line-through;
						margin-left: 10rpx;
					}
				}

				.price {
					font-family: DIN, DIN;
					font-weight: bold;
					font-size: 28rpx;
					color: #FF4201;
					line-height: 56rpx;
				}
			}
		}
	}
</style>